<template>
	<view
		class="ticket-item"
		hover-class="ticket-item-hove"
		@tap="toTicket()">
		<view class="time">
			<view style="display: flex; flex: 1; flex-direction: column; justify-content: center;">
				<text style="font-weight: bold;" :class="{'disabled-text': !status}">{{time.substring(10, 16)}}</text>
			</view>
			<text 
				style="font-size: 24rpx; color: #949699; line-height: 60upx;">
				{{estimate}}
			</text>
		</view>
		<view class="router">
			<view class="progress-bar">
				 <view class="bar-item">
					<view class="bar-round" />
					<view class="bar-info" :class="{'disabled-text': !status}">{{fromStation}}</view>
				 </view>
				 <view class="progress-bar-line"/>
				 <view class="bar-item">
				 	<view class="bar-round2" />
				 	<view class="bar-info" :class="{'disabled-text': !status}">{{endStation}}</view>
				 </view>
			</view>
			<view class="site-num">
				<image src="../../../static/icon_station.png" mode=""></image>
				<text
					:class="{'disabled-text': !status}"
					style="font-size: 24rpx; color: #409eff; line-height: 50upx;">
					{{`途经${stationCount}个站点`}}
				</text>
			</view>
		</view>
		<view class="time" style="justify-content: flex-start;">
			<text>
				<text style="font-size: 28rpx; color: red;" :class="{'disabled-text': !status}">￥</text>
				<text style="font-size: 36rpx; color: red; font-weight: bold;" :class="{'disabled-text': !status}">{{ticketPrice}}</text>
			</text>
			<text
				:class="{'disabled-text': !status}"
				style="font-size: 24rpx; color: #5E6166; line-height: 60upx;" >
				{{ status ? `余${remainingTicket}` : '已售完'}}
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TicketItem",
		props: {
			time: {
				type: String,
				default: ""
			},
			estimate: {
				type: String,
				default: ""
			},
			fromStation: {
				type: String,
				default: ""
			},
			endStation: {
				type: String,
				default: ""
			},
			stationCount: {
				type: Number,
				default: 0
			},
			ticketPrice: {
				type: Number,
				default: 0
			},
			remainingTicket: {
				type: Number,
				default: 0
			},
			status: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			toTicket() {
				this.$emit("toTicket");
			}
		}
	}
</script>

<style lang="scss">
	.ticket-item-hove {
		opacity: 0.8;
	}
	.disabled-text {
		color: rgba(161, 161, 163, 0.6)!important;
	}
	.ticket-item {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 15upx;
		margin-bottom: 15upx;
		background: #FFFFFF;
		.router {
			flex: 1;
			margin-left: 10upx;
			.site-num {
				padding-left: 10upx;
				padding-right: 15upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				image {
					width: 30upx;
					height: 30upx;
					margin-right: 10upx;
				}
			}
			.progress-bar {
				height: 120upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 15upx;
				padding-right: 15upx;
				.progress-bar-line {
					flex: 1;
					width: 1upx;
					margin-left: 11.7upx;
					background: #C4C4C4;
				}
				.bar-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					.bar-round {
						width: 20upx;
						height: 20upx;
						border-radius: 50%;
						background: #C4C4C4;
						border: solid 1upx #C4C4C4;
					}
					.bar-round2 {
						width: 20upx;
						height: 20upx;
						border-radius: 50%;
						background: #FFFFFF;
						border: solid 1upx #C4C4C4;
					}
					.bar-info {
						font-size: 32upx;
						font-weight: bold;
						margin-left: 10upx;
					}
				}
			}
		}
		.time {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			width: 180upx;
		}
	}
</style>
